<template>
	<view>
		<view class="box">
			<view class="list">
				<view class="top">
					<view class="title">选择楼栋</view>
					<view class="btn" @click="confirm">
						确认
					</view>
				</view>
				<view class="mobile">
					<view v-if="listSelect.length === 0">  
					    楼栋/单元 
					</view>  
					<view v-else v-for="(item, index) in listSelect" :key="item.id" @click="checkItem(index, item.pid)">  
					    {{ item.name }}
					</view>  
				</view>
				<view class="uli">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="li" @click="house(index)" v-for="(item,index) in list" :key="item.id">
							<view>{{item.name}}</view>
							<view v-if="item.id==checkData.id" class="iconfont icon-duigou-cu"></view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		buildingList
	} from '../../api/house.js'
	export default {
		data() {
			return {
				pid: 0,
				list: [],
				selectIndex: null,
				checkData: {},
				listSelect: [], //选中的值
				text: '楼栋房号'
			}
		},
		created() {
			this.getbuildingList(0)
		},
		methods: {
			async getbuildingList(index) {
				// alert(index)
				let res = await buildingList(this.pid)
				console.log(res);
				if (res.errCode === 10000) {
					if (res.data.list.length == 0 && this.list.length > 0) {
						this.selectIndex = index
						this.checkData = this.list[index]
					} else {
						this.list = res.data.list;
					}
				}

			},

			house(index) {
				this.pid = this.list[index].id
				this.getbuildingList(index)
				if (this.listSelect.length === 0) {
					this.listSelect.push(this.list[index])
					return
				}

				let lastIndex = this.listSelect.length - 1
				let lastData = this.listSelect[lastIndex]

				// console.log(555, lastData);
				let has = this.list.some(item => item.id === lastData.id)

				if (has) {
					this.listSelect[lastIndex] = this.list[index]
				} else {
					this.listSelect.push(this.list[index])
				}
			},
			checkItem(index, pid) {
				this.pid = pid
				this.listSelect.splice(index + 1);
				this.getbuildingList(0)
			},

			// 确认
			confirm() {
				if (this.listSelect.length > 0) {
					this.$emit('handconfirm', this.listSelect);
				} else {
					alert('请至少选择一栋楼！');
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.4);

		.list {
			width: 100%;
			height: auto;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;

			.top {
				width: 100%;
				height: 120rpx;
				font-size: 26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.btn {
					width: 100rpx;
					height: 50rpx;
					background-color: rgb(54, 130, 249);
					position: absolute;
					right: 30rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 20rpx;
					color: #fff;
					font-size: 25rpx;
				}
			}

			.mobile {
				width: 100%;
				height: 110rpx;
				// background-color: aquamarine;
				display: flex;
				align-items: center;

				view {
					font-size: 26rpx;
					padding-left: 20rpx;
				}
			}

			.uli {
				height: 50vh;

				.scroll-Y {
					width: 100%;
					height: 100%;

					.li {
						width: 100%;
						height: 100rpx;
						border-bottom: 2rpx solid #f5f5f5;
						line-height: 100rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;
					}
				}


			}
		}
	}
</style>